<template>
  <el-select v-model="itemValue" multiple clearable placeholder="Select" popper-class="custom-header">
    <template #header>
      <el-checkbox v-model="checkAll"> 全选 </el-checkbox>
    </template>
    <el-option v-for="item in options" :key="item.value" v-bind="item" />
  </el-select>
</template>

<script lang="ts" setup>
import { computed } from 'vue';


interface Props {
  dataForm: ObjectAny // 绑定对象
  options: any[] // 组件配置
}
const props = withDefaults(defineProps<Props>(), {})
const emit = defineEmits(['change'])


const itemValue = computed({
  get() {
    return props.dataForm['demo7']
  },
  set(value) {
    emit('change', 'demo7', value)
    if (props.dataForm['demo7']) {
      emit('change', 'demo7flag', props.dataForm['demo7'].length === props.options.filter(o => !o.disabled).length)
    }
  }
})

const checkAll = computed({
  get() {
    return props.dataForm['demo7flag']
  },
  set(value) {
    emit('change', 'demo7flag', value)
    emit('change', 'demo7', value ? props.options.filter(o => !o.disabled).map(o => o.value) : [])
  }
})
</script>

<style lang="scss">
.custom-header {
  .el-checkbox {
    display: flex;
    height: unset;
  }
}
</style>
